<template>
  <van-tabbar v-model="active" router v-show="isShow">
    <van-tabbar-item
      v-for="item in tabbarList"
      :key="item.link"
      :icon="item.icon"
      :to="item.link"
    >
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { reactive, ref, watch } from "vue";
import router from "../router";
export default {
  setup() {
    const active = ref(0);
    const isShow = ref(false);
    const menus = ["/message", "/center", "/recommend", "/find"];
    watch(router.currentRoute, (value) => {
      const path = value.path;
      watchPath(path);
    });
    function watchPath(path) {
      if (path == "/") {
        isShow.value = true;
      } else {
        for (let i = 0; i < menus.length; i++) {
          if (path == (menus[i])) {
            isShow.value = true;
          }
        }
      }
    }
    const tabbarList = reactive([
      {
        icon: "home-o",
        title: "推荐",
        link: "/recommend",
      },
      {
        icon: "search",
        title: "发现",
        link: "/find",
      },
      {
        icon: "friends-o",
        title: "消息",
        link: "/message",
      },
      {
        icon: "setting-o",
        title: "我的",
        link: "/center",
      },
    ]);

    return {
      active,
      tabbarList,
      isShow,
    };
  },
};
</script>

<style>
</style>